/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useEffect} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Alert,
  Image,
} from 'react-native';
import SplashScreen from 'react-native-splash-screen';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
  // Platform,
  Linking,
  // TouchableOpacity,
} from 'react-native/Libraries/NewAppScreen';
import {Platform, TouchableOpacity} from 'react-native';

import {
  isFirstTime,
  isRolledBack,
  packageVersion,
  currentVersion,
  checkUpdate,
  downloadUpdate,
  switchVersion,
  switchVersionLater,
  markSuccess,
} from 'react-native-update';

import _updateConfig from './update.json';

import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn:
    'https://41412ce7b0fd48c386ee21931cfb8114@o469289.ingest.sentry.io/5529857',
});

const {appKey} = _updateConfig[Platform.OS];

const App: () => React$Node = () => {
  const doUpdate = (info) => {
    downloadUpdate(info)
      .then((hash) => {
        Alert.alert('提示', '下载完毕,是否重启应用?', [
          {
            text: '是',
            onPress: () => {
              switchVersion(hash);
            },
          },
          {text: '否'},
          {
            text: '下次启动时',
            onPress: () => {
              switchVersionLater(hash);
            },
          },
        ]);
      })
      .catch((err) => {
        Alert.alert('提示', '更新失败.');
      });
  };
  const checkUpdate2 = () => {
    checkUpdate(appKey)
      .then((info) => {
        if (info.expired) {
          Alert.alert('提示', '您的应用版本已更新,请前往应用商店下载新的版本', [
            {
              text: '确定',
              onPress: () => {
                info.downloadUrl && Linking.openURL(info.downloadUrl);
              },
            },
          ]);
        } else if (info.upToDate) {
          Alert.alert('提示', '您的应用版本已是最新.');
        } else {
          Alert.alert(
            '提示',
            '检查到新的版本' + info.name + ',是否下载?\n' + info.description,
            [
              {
                text: '是',
                onPress: () => {
                  doUpdate(info);
                },
              },
              {text: '否'},
            ],
          );
        }
      })
      .catch((err) => {
        Alert.alert('提示', '更新失败.');
      });
  };
  useEffect(() => {
    setTimeout(() => {
      SplashScreen.hide();
    }, 3000);
  }, []);
  useEffect(() => {
    if (isFirstTime) {
      Alert.alert(
        '提示',
        '这是当前版本第一次启动,是否要模拟启动失败?失败将回滚到上一版本',
        [
          {
            text: '是',
            onPress: () => {
              throw new Error('模拟启动失败,请重启应用');
            },
          },
          {
            text: '否',
            onPress: () => {
              markSuccess();
            },
          },
        ],
      );
    } else if (isRolledBack) {
      Alert.alert('提示', '刚刚更新失败了,版本被回滚.');
    }
  }, []);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />

          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.container}>
              <Text style={styles.welcome}>欢迎使用热更新服务</Text>
              <Text style={styles.instructions}>
                这是版本二{'\n'}
                当前包版本号: {packageVersion}
                {'\n'}
                当前版本Hash: {currentVersion || '(空)'}
                {'\n'}
              </Text>
              <TouchableOpacity onPress={checkUpdate2}>
                <Text style={styles.instructions}>点击这里检查更新</Text>
              </TouchableOpacity>
              <Image
                source={require('./assets/news_dia_coupon4.png')}
                style={{width: 400, height: 100}}
              />
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;
